<template>
  <div>
     <a-drawer
      :title="title"
      placement="right"
      :closable="false"
      :width="width"
      :visible="visible"
      @close="onClose"
    >
      <detail-list title="">
        <detail-list-item term="产品ID">34353232</detail-list-item>
        <detail-list-item term="设备">广泛大</detail-list-item>
        <detail-list-item term="配方ID">bf43</detail-list-item>
      </detail-list>
      <div class="list-bg">
        <detail-list title="" v-for="(item,idx) in dataList" :col="4" :key="idx+'ji'">
            <detail-list-item term="工艺参数1">{{item.name}}</detail-list-item>
            <detail-list-item term="设置值">{{item.sonrean}}</detail-list-item>
            <detail-list-item term="实际值">{{item.ualval}}</detail-list-item>
            <detail-list-item term="单位">{{item.time}}</detail-list-item>
        </detail-list>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import DetailList from '@/components/tool/DetailList'
const DetailListItem = DetailList.Item
export default {
  name:'formulaDraw',
  components:{DetailList,DetailListItem},
  data(){
      return{
        title:'配方详情',
        visible:false,
        width:800,
        activeKey:'1',
        dataList:[
            {name:'4',sonrean:'r',time:'3',ualval:'3'},
            {name:'4',sonrean:'r',time:'3',ualval:'3'},
            {name:'4',sonrean:'r',time:'3',ualval:'3'},
            {name:'4',sonrean:'r',time:'3',ualval:'3'},
        ],
      }
  },
  methods:{
      open(val){
          this.visible=true
      },
      onClose(){this.visible=false}
  },
}
</script>

<style lang="less" scoped>
.list-bg{
    background-color: azure;
    padding: 10px;
    border-radius: 9px;
}
</style>